<template>
	<view>
		<u-sticky>
			<view class="total f-c-sa">
				<view> 今日核销：<span>{{statistics.dayWriteOff||0}}单</span> </view>
				<view>累计核销：{{statistics.allWriteOff||0}}单</view>
			</view>
		</u-sticky>	
		
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="item fromBox boxShadow" v-for="(item, index) in list" :key="index" @click="godetail(item.id)">
				<view class="f-c-fs">
					<view class="label">核销类型：</view>
					<view class="value">{{item.writeOffType|activityType}}核销</view>
				</view>
				<!-- <view class="f-c-fs">
					<view class="label">活动类型：</view>
					<view class="value">{{item.typeName}}</view>
				</view> -->
				<view class="f-c-fs">
					<view class="label">活动名称：</view>
					<view class="value">{{item.detailName}}</view>
				</view>
				<view class="f-c-fs">
					<view class="label">用户昵称：</view>
					<view class="value">{{item.memberName}}</view>
				</view>
				<view class="f-c-fs">
					<view class="label">核销时间：</view>
					<view class="value">{{item.writeOffTime}}</view>
				</view>
				<view class="f-c-fe">
					<view class="btn">详情</view>
				</view>
				<view class="status"></view>
			</view>
		</mescroll-body>
	</view>
</template>
<script>
	import {
		writeoffList,
		writeoffTabList
	} from '@/api/marketingB-helper.js';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				statistics: {},
				list: []
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo;
			}
		},
		onLoad() {

		},

		methods: {
			//获取统计数据
			getStatics() {
				writeoffTabList({
					storeBasicId: this.userInfo.storeId,
				}).then(res => {
					this.statistics = res.data;
				})
			},

			upCallback(page) {
				if (page.num == 1) {
					this.getStatics();
				}
				//获取核销记录数据
				writeoffList({
					storeBasicId: this.userInfo.storeId,
					pageNo: page.num,
					pageSize: page.size
				}).then(res => {
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.data); //追加新数据
					this.mescroll.endSuccess(res.data.length);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//详情
			godetail(id) {
				this.$navigateTo('./detail', {
					id: id
				})
			},
		}
	}
</script>
<style lang="less">
	.total {
		padding: 20rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		background-color: #ffffff;
		span {
			color: #FF6738;
		}
	}

	.item {
		padding: 20rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		width: 700rpx;
		background: #ffffff;
		border-radius: 5rpx;
		position: relative;

		.label {
			margin: 15rpx 0;
		}

		.btn {
			width: 168rpx;
			height: 60rpx;
			background: #3992ff;
			border-radius: 30rpx;
			font-size: 28rpx;
			font-weight: 700;
			color: #ffffff;
			line-height: 60rpx;
			text-align: center;
		}

		.status {
			width: 132rpx;
			height: 132rpx;
			background-image: url('https://sj.shopec.com.cn/image-server/glxcx/核销成功.png');
			background-size: cover;
			position: absolute;
			top: 58rpx;
			right: 41rpx;
		}
	}
/deep/ .empty-icon{
		display: inline-table;
	}
	
	.item .label{
		min-width: 150rpx;
	}
</style>
